:root{
  --error-color: #f46267;
}

:host([class="dark"]) {
  --bg-color: rgb(36, 37, 41);
  --bg-list-color: rgb(36, 37, 41);
  --bg-select: rgb(53, 53, 55);
  --font-color: rgb(141, 133, 128);
  --font-active: rgb(226, 222, 209);
  --border-line: rgba(218, 217, 215, 0.1);
  --shadow-color: rgba(255, 255, 255, 0.1);
  --bg-contenteditable: rgb(28, 31, 44);
}

:host([class="light"]) {
 --bg-color: rgb(244, 245, 246);
 --bg-list-color: rgb(244, 245, 246);
 --bg-select: rgb(248, 249, 251);
 --font-color: rgb(75, 72, 74);
 --font-active: rgb(51, 51, 51);
 --border-line: rgba(8, 8, 8, 0.1);
 --shadow-color: rgba(0, 0, 0, 0.2);
 --bg-contenteditable: rgb(223, 225, 226);
}


.dark {
  --bg-color: rgb(36, 37, 41);
  --bg-list-color: rgb(36, 37, 41);
  --bg-select: rgb(53, 53, 55);
  --font-color: rgb(141, 133, 128);
  --font-active: rgb(226, 222, 209);
  --border-line: rgba(218, 217, 215, 0.1);
  --shadow-color: rgba(255, 255, 255, 0.1);
  --bg-contenteditable: rgb(28, 31, 44);
}

.light {
  --bg-color: rgb(244, 245, 246);
  --bg-list-color: rgb(244, 245, 246);
  --bg-select: rgb(248, 249, 251);
  --font-color: rgb(75, 72, 74);
  --font-active: rgb(51, 51, 51);
  --border-line: rgba(8, 8, 8, 0.1);
  --shadow-color: rgba(0, 0, 0, 0.2);
  --bg-contenteditable: rgb(223, 225, 226);
}